<!--
 * @Author: your name
 * @Date: 2022-01-12 02:11:45
 * @LastEditTime: 2022-01-12 04:06:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \campus-market-frontend-master\src\pages\usercenter\favoriteitem.vue
-->
<template>
  <el-card v-for="item in list" :key="item.id">
    <el-row>
      <el-col :span="8" @click="toitemid(item.item.id)"
        ><div>
          <h2>{{ item.item.name }}</h2>
          <span class="newPrice">¥{{ item.item.price }}</span>
          <del
            v-if="item.item.originalPrice"
            class="oldPrice"
            style="color: grey"
          >
            ¥{{ item.item.originalPrice }}
          </del>
        </div></el-col
      >
      <el-col :span="10" @click="toitemid(item.item.id)"
        ><div>
          <span class="describe">{{ item.item.description }}</span>
        </div></el-col
      >
      <el-col :span="6" class="col3">
        <el-button
          class="deletefarite"
          type="danger"
          plain
          @click="cancelCollect(item.item.id)"
          >取消收藏</el-button
        >
        <!-- <span>{{ item }}</span> -->
      </el-col>
    </el-row>
  </el-card>
  <div>
    <!-- <span>{{ list[0].id }}</span> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  getFavorites,
  changeFavorites,
  favorite,
  checkFavorites
} from '../../services/items'


const list = ref()


// 获取收藏列表
onMounted(async () => {
  list.value = (await getFavorites()).data
  // console.log(list.value)
})

const router = useRouter()
// 跳转
const toitemid = (id: string) => {
  router.push(`/itemDetails/${id}`)
}

// 取消收藏
async function cancelCollect(id: string) {
  const isFavorite: favorite = {
    favorite: false
  }
  // console.log(id,(await checkFavorites(id)).data)
  await changeFavorites(id, isFavorite)
  // console.log((await checkFavorites(id)).data)
  location.reload()
}
</script>

<style lang="less" scoped>
.el-card {
  margin: 20px 0;
  h2 {
    position: relative;
    bottom: 25px;
  }
  .newPrice {
    margin-right: 20px;
  }
  .oldPrice {
    color: red;
  }
  .col3 {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
